<template>
	<view>
		<u-navbar>
			<view class="searchbox" @click="navto">
				<text v-if="text!=''">{{text}}</text>
			</view>
		</u-navbar>
		<view class="content">
			<view class="nav">
				<view class="navitem" @click="zonghe">
					<text>综合推荐</text>
					<image src="../../static/icon/pp.png"></image>
				</view>
				<view class="navitem" @click="xiaoliang">
					<text>销量</text>
					<image src="../../static/icon/pp.png" v-if="sortPrice==-1"></image>
					<image src="../../static/icon/p-dow.png" v-if="sortPrice==1"></image>
					<image src="../../static/icon/p-up.png" v-if="sortPrice==0"></image>
				</view>
				<!-- <view class="navitem">
					<text>价格</text>
					<image src="../../static/icon/pp.png"></image>
				</view> -->
			</view>
			<view class="goods-box" v-if="list.length>0">
				<view class="goodsitem" v-for="item in list " @click="navTo(item.goodsId)">
					<image :src="item.goodsImage" mode="aspectFill" class="goodsimg"></image>
					<view class="goodsname">{{item.goodsName}}</view>
					<view class="price">
						<text class="pr" v-if="item.isVip==1">￥{{item.goodsMoney}}</text>
						<text class="pr" v-if="item.isVip==0">{{item.goodsMoney}}积分</text>
						<text class="fu">{{item.goodsSales}}付款</text>
					</view>
				</view>
			</view>
			<view v-else>
				<image src="../../static/cart/content.png" class="noimg"></image>
				<view class="notitle">暂无商品~~~</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {searchData} from"../../api/product.js"
	import {shopData} from"../../api/index.js"
	export default {
		data() {
			return {
				text: "",
				num:0,
				list:[],
				isflag:true,
				type:0,//0查看更多会员产品 1 查看更改推荐产品
				pid:null,//分类的id
				sortType:"all",//用于搜索商品排序用 sales sortPrice是查销量用的
				sortPrice:-1 //0降序 1 升序
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.text!=null) {
				console.log(e)
				this.text = e.text
				this.getSearchData();
				this.type=-1
			}
			if(e.type){
				this.type=e.type
				if(e.type==1){
					this.getvipgoods()
				}else if(e.type==2){
					this.gettuijian()
				}
			}
			if(e.pid){
				this.pid=e.pid
				this.getProduct()
			}
		},
		onReachBottom() {
			if(this.text!=null&&this.type==-1){
				this.getSearchData();
			}
			if(this.type==1){
				this.getvipgoods()
			}
			if(this.type==2){
				this.gettuijian()
			}
			if(this.pid!=null){
				this.getProduct()
			}
		},
		methods: {
			// 点击综合
			zonghe(){
				this.num=0
				this.list=[]
				this.sortType="all"
				this.sortPrice=-1
				if(this.text!=null&&this.type==-1){
					this.getSearchData();
				}
				if(this.type==1){
					this.getvipgoods()
				}
				if(this.type==2){
					this.gettuijian()
				}
				if(this.pid!=null){
					this.getProduct()
				}
			},
			// 点击销量
			xiaoliang(){
				console.log(111)
				this.num=0
				this.list=[]
				this.sortType="sales"
				if(this.sortPrice!=0){
					this.sortPrice=0}
				else if(this.sortPrice==0){
					this.sortPrice=1
				}
				if(this.text!=null&&this.type==-1){
					this.getSearchData();
				}
				if(this.type==1){
					this.getvipgoods()
				}
				if(this.type==2){
					this.gettuijian()
				}
				if(this.pid!=null){
					this.getProduct()
				}
			},
			// 点击商品跳转
			navTo(id){
				// type=0 为正常的商品 1 会员产品 2推荐产品
				uni.navigateTo({
					url:"/pages/product/detail?id="+id+"&type="+this.type
				})
			},
			// 获取分类产品
			async getProduct(){
				this.num++
				let res=await this.get(shopData,{twoCategoryId:this.pid,
				pageNum:this.num,
				pageSize:10,
				sortType:this.sortType,
				sort:this.sortPrice})
				res.data.list.forEach(item=>{
					this.list.push(item)
				})
			},
			// 获取会员产品
			async getvipgoods(){
				this.num++
				let res=await this.get(shopData,{type:0,
				pageNum:this.num,
				pageSize:10,
				sortType:this.sortType,
				sort:this.sortPrice})
				res.data.list.forEach(item=>{
					this.list.push(item)
				})
			},
			// 获取推荐产品
			async gettuijian(){
				this.num++
				let res=await this.get(shopData,{type:1,
				pageNum:this.num,
				pageSize:10,
				sortType:this.sortType,
				sort:this.sortPrice
				})
				res.data.list.forEach(item=>{
					this.list.push(item)
				})
			},
			// 获取搜索的产品
			async getSearchData(){
				this.num++
				let res=await this.get(searchData,{
					pageNum:this.num,
					pageSize:10,
					sortType:this.sortType,
					search:this.text,
					sort:this.sortPrice
				})
				if(res.data.list.length<10){this.isflag=false}
				res.data.list.forEach(item=>{
					this.list.push(item)
				})
			},
			navto(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
		}
	}
</script>

<style>
	.notitle{
		text-align: center;
	}
	.noimg{
		width: 200rpx;
		height: 200rpx;
		margin-left: 275rpx;
		margin-top: 300rpx;
	}
	.navitem {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		
	}

	.navitem>image {
		width: 12rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}

	.nav {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 68rpx;
	}

	page {
		background-color: #F6F6F6;
	}

	.pr {
		padding-left: 10rpx;
	}

	.fu {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
		opacity: 1;
		padding-right: 30rpx;

	}

	.price {
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F0812D;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

	}

	.goodsname {
		height: 80rpx;
		font-size: 26rpx;
		margin-top: 10rpx;
		line-height: 40rpx;
		color: #000000;
		padding: 0 10rpx;
		box-sizing: border-box;
		width: 340rpx;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.goodsimg {
		width: 340rpx;
		height: 310rpx;
		display: block;

	}

	.goodsitem {
		width: 340rpx;
		height: 480rpx;
		margin-right: 10rpx;
		border-radius: 14rpx;
		overflow: hidden;
		margin-bottom: 14rpx;
		background-color: #FFFFFF;
	}

	.goods-box {
		width: 750rpx;
		padding: 0rpx 0 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.searchbox {
		width: 646rpx;
		height: 58rpx;
		border: 1px solid #B2B2B2;
		opacity: 1;
		border-radius: 32rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;

	}

	.searchbox>text {
		background-color: #F0812D;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 30rpx;
		padding: 2rpx 6rpx;
	}
</style>
